<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>班级空间设置(新增)</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <!-- 样式初始化 自定义文件 -->
    <link rel="stylesheet" href="../css/index.css">
    <!-- 下面所有都是库文件 -->
    <link rel="stylesheet" href="../newtp/lib/weui.min.css">
    <link rel="stylesheet" href="../newtp/css/jquery-weui.css">
    <link rel="stylesheet" href="../newtp/css/theme.css">
    <script src="../newtp/lib/jquery-2.1.4.js"></script>
    <script src="../newtp/lib/fastclick.js"></script>
    <script src="../newtp/js/jquery-weui.js"></script>
<style>
/*最外层*/
.page-container{height: 100%;width: 100%;  overflow: hidden; }
/*顶部*/
.page-top{ height: 50px; top:0; background:#fff; }
.g-back{ float: left; width: 80px;  height: 50px;background: url(../img/g_03.png) center no-repeat; background-size: 18px; }
.g-other{float: right;width: 80px; height: 50px;}
.t-title{ display:block; line-height: 50px; width: 100%;  text-align: center; }
/*内容容器*/
/*内容*/
.page-wrap{ height: 100%; width: 100%; background:#f8f8f8;overflow-y: auto; }
/*空间图像*/
.k-img-set{position: relative; top: 10px; padding:0 18px; height: 70px; font-size: 14px; background:#fff; overflow:hidden;}
.k-img-set span{ float: left;min-width:100px; line-height: 70px;}
.k-img-set img{position: absolute; width:60px; height: 60px; top: 5px; left:100px;}
.k-img-set a{ float: right;margin-top:22px; width:50px;line-height: 30px;border-radius:3px;text-align: center;color: #fff;background: #3095fd; }
/*寄语简介*/
.k-jie-set{margin-top: 20px;font-size: 14px; background:#fff; overflow:hidden;}
.k-jie-set .inp{ position: relative; overflow: hidden; padding:0 18px; height: 44px; border-bottom: 1px solid #f2f2f2; }
.k-jie-set .inp span{ position: absolute; left: 18px; top:0;  width:100px; line-height: 44px; }
.k-jie-set .inp input{padding-left: 100px;  width:100%; line-height: 44px;  }
.k-jie-set .text{position: relative; padding:0 18px; height: 44px; }
.k-jie-set .text span{  position: absolute; left: 18px; top:0;  width:100px; line-height: 44px;  }
.k-jie-set .text p{padding:12px 0 12px 100px;height: 150px; float:left;width:100%; word-break: break-all;  }
.k-jie-set .text textarea{display:block;height:100%;width:100%; word-break: break-all;color:#333;font-size:14px;font-family: inherit;  }
/*背景图片*/
.k-bg-set{ margin-top: 10px; padding:0 18px; height: 50px; font-size: 14px; background:#fff; overflow:hidden;}
.k-bg-set span{ float: left;width:100px; line-height: 50px;}
.k-bg-set a{ float: right;margin-top:10px; width:50px;line-height: 30px;border-radius:3px;text-align: center;color: #fff;background: #3095fd; }
/*默认版本*/
.k-vis-set{margin-top: 10px; padding:0 0 0 18px; min-height: 50px; font-size: 14px; background:#fff; overflow:hidden;}
.k-vis-set span{ float: left;width:100px;height: 50px; line-height: 50px;}
.k-vis-set a{ float: right;height: 50px; width:50px; color: #333;line-height: 50px;}
.k-vis-set ul{ display: none;}
.k-vis-set li{ height: 40px; line-height: 40px; color: #666;}
/*底部按钮*/
.botm{  padding:25px;  }
.botm a{  display: block; width: 100%; padding:10px; border-radius: 5px; 
          border:1px solid #278ffe; text-align: center; font-size: 15px;}
.botm .btn-ok{background: #fff linear-gradient(to right,#06b8fe,#278ffe); color:#fff; }
/*辅助类*/
.g-left{ background:url(../img/rr_03.png) right center no-repeat; background-size: 7px 14px; }
.g-down{ background:url(../img/down_06.png) 19px center no-repeat; background-size: 14px 8px; }
.g-up{ background:url(../img/up_03.png) 19px center no-repeat; background-size: 13px 7px; }
</style>
</head>
<body>
<div class="page-container">
      <div class="weui-tab">
             <!-- 头部 -->
              <div class="weui-navbar page-top">
                      <a  href="javascript:history.back(-1);" class="g-back"></a>                   
                      <span class="t-title">班级空间设置</span>  
                      <a  class="g-other"></a>
              </div>
              <!-- 内容区 -->
              <div class="weui-tab__bd page-wrap" >             
                      <!-- 信息内容 -->
                      <div class="k-img-set">
                          <span class="item-key">空间图像</span>
                          <img src="../img/1_03.png" id="head_img">
                          <input type="file" id="file" style="display: none;">
                          <a href="###" onclick="file.click()">上传</a>
                      </div>
                      <!-- 寄语简介 -->
                      <div class="k-jie-set">
                          <div class="inp"><span class="item-key">寄语</span><input type="text" placeholder="请输入..."> </div>
                          <div class="text">
                             <span class="item-key">简介</span>
                             <p>
                                 <textarea name="" placeholder="请输入......"></textarea>
                             </p>
                          </div>
                      </div>
                      <!-- 背景图像 -->
                      <div class="k-bg-set">
                          <span class="item-key">背景图片</span>
                          <span class="left" id="file_v" style="height: 100%;color: green;"></span>
                          <input type="file" id="file2" style="display: none;">
                          <a href="###" onclick="file2.click();">上传</a>
                      </div>
                      <!-- 默认版本 -->
                      <div class="k-vis-set">
                          <span class="item-key">默认版本</span>
                          <a href="###" class="g-up" id="banben"></a>
                          <span id="banben-v" style="float: right;line-height: 50px;width: auto;text-align: right;">版本1</span>                         
                          <div class="clear"></div>
                          <ul id="banben-list">
                            <li>版本1</li>
                            <li>版本2</li>
                            <li>版本3</li>
                          </ul>
                      </div>
                      <!-- 底部按钮 -->
                      <div class="botm">
                            <a href="banjikongjian.html" id="saveBtn" class="btn-ok">保 &nbsp; &nbsp; 存</a>
                      </div>
               </div>
       </div>
</div>
</body>
<script>
// 图片上传
$("#file").on("change",function(){
    var fileName = this.value;   
    if (!fileName.match(/.jpg|.gif|.png|.bmp/i)) {   
        alert('您上传的图片格式不正确，请重新选择！');   
        return false;   
    }   
    var file = this.files[0];
    if (!!file) {  
          var img=$("#head_img")[0];    
          var myURL = window.URL || window.webkitURL;
          var url=myURL.createObjectURL(file);
          // img.style.backgroundImage="url("+url+")";
          img.src=url;
    }  
})

$("#file2").on("change",function(){
    var fileName = this.value;   
    if (!fileName.match(/.jpg|.gif|.png|.bmp/i)) {   
        alert('您上传的图片格式不正确，请重新选择！');   
        return false;   
    } 
    var file = this.files[0];
    if (!!file) {  
          var myURL = window.URL || window.webkitURL;
          var url=myURL.createObjectURL(file);
    } 
   $("#file_v").text(" 上传成功！ ");
})

// 版本选择下拉
$("#banben").click(function(){
    if($(this).hasClass("g-up")){
       $(this).removeClass("g-up").addClass("g-down");
       $('#banben-list').slideDown();
    }else{
       $(this).removeClass("g-down").addClass("g-up");
       $('#banben-list').slideUp();
    }
})

$('#banben-list').find("li").click(function(){
    $('#banben-list').slideUp();
    $("#banben").removeClass("g-down").addClass("g-up");
    $("#banben-v").text(this.innerHTML);
})


</script>
</html>